<template>
  <!-- 经济效益 -->
  <div class="targetStatisticsEconomic">
    <div class="boxTops">
      <div class="boxTopsLeft">
        <dl>
          <dt>总上路天数</dt>
          <dd>{{ props.carData.sumWorkDays }}</dd>
        </dl>
        <dl>
          <dt>总公里数</dt>
          <dd>{{ props.carData.sumWorkMileage }}</dd>
        </dl>
        <dl style="border: none">
          <dt>总工作时长（小时）</dt>
          <dd>{{ props.carData.sumFormateHour }}</dd>
        </dl>
      </div>
      <div class="boxTopsRight">
        <dl>
          <dt>合计节约费用（元）</dt>
        <dd>{{ props.carData.costdiff + props.carData.fuelcostdiff }}</dd>
        </dl>
      </div>
    </div>
    <div class="boxCenter">
      <div class="boxCenterLeft">
        <div class="card">
            <header>100-90</header>
            <section style="color: #10c935">
              {{ props.carData._90_100work }}
            </section>
            <footer>
              <dl class="footerLeft">
                <dt>公里数（km/h)</dt>
                <dd>{{ props.carData._90_100workMileage }}</dd>
              </dl>
              <dl class="footerRight">
                <dt>工作时长（h)</dt>
                <dd>{{ props.carData._90_100workHours }}</dd>
              </dl>
            </footer>
          </div>
          <div class="card">
            <header>90-80</header>
            <section style="color: #86d514">
              {{ props.carData._80_90work }}
            </section>
            <footer>
              <dl class="footerLeft">
                <dt>公里数（km/h)</dt>
                <dd>{{ props.carData._80_90workMileage }}</dd>
              </dl>
              <dl class="footerRight">
                <dt>工作时长（h)</dt>
                <dd>{{ props.carData._80_90workHours }}</dd>
              </dl>
            </footer>
          </div>
          <div class="card">
            <header>80-70以下</header>
            <section style="color: #e8e61f">
              {{ props.carData._70_80work }}
            </section>
            <footer>
              <dl class="footerLeft">
                <dt>公里数（km/h)</dt>
                <dd>{{ props.carData._70_80workMileage }}</dd>
              </dl>
              <dl class="footerRight">
                <dt>工作时长（h)</dt>
                <dd>{{ props.carData._70_80workHours }}</dd>
              </dl>
            </footer>
          </div>
          <div class="card">
            <header>70-60</header>
            <section style="color: #ec6320">
              {{ props.carData._60_70work }}
            </section>
            <footer>
              <dl class="footerLeft">
                <dt>公里数（km/h)</dt>
                <dd>{{ props.carData._60_70workMileage }}</dd>
              </dl>
              <dl class="footerRight">
                <dt>工作时长（h)</dt>
                <dd>{{ props.carData._60_70workHours }}</dd>
              </dl>
            </footer>
          </div>
          <div class="card">
            <header>60以下</header>
            <section style="color: #e02528">
              {{ props.carData._0_60work }}
            </section>
            <footer>
              <dl class="footerLeft">
                <dt>公里数（km/h)</dt>
                <dd>{{ props.carData._0_60workMileage }}</dd>
              </dl>
              <dl class="footerRight">
                <dt>工作时长（h)</dt>
                <dd>{{ props.carData._0_60workHours }}</dd>
              </dl>
            </footer>
          </div>
      </div>
      <div class="boxCenterRight">
        <div class="card"
               style="margin-right: 10px">
            <header>节约台班费（元）</header>
            <section>{{ props.carData.costdiff }}</section>
            <footer>
              <dl class="footerLeft">
                <dt>清扫前（元)</dt>
                <dd>{{ props.carData.costbefore }}</dd>
              </dl>
              <dl class="footerRight">
                <dt>优化后（元)</dt>
                <dd>{{ props.carData.costafter }}</dd>
              </dl>
            </footer>
          </div>
          <div class="card">
            <header>节约燃油费（元）</header>
            <section>{{ props.carData.fuelcostdiff }}</section>
            <footer>
              <dl class="footerLeft">
                <dt>清扫前（元)</dt>
                <dd>{{ props.carData.fuelcostbefore }}</dd>
              </dl>
              <dl class="footerRight">
                <dt>优化后（元)</dt>
                <dd>{{ props.carData.fuelcostafter }}</dd>
              </dl>
            </footer>
          </div>
      </div>
    </div>
    <div class="boxBottom">
      <h1>备注：</h1>
      <p><span>x</span> 100-90分的默认不上路清扫</p>
      <p>
        <span>x</span>
        后续的思路：进一步去指导分析台版计划，比如一周或者是一个月上路几次，在一个台班清扫的时候，重点扫哪几段
      </p>
      <p>
        <span>x</span> 提高路容路貌，进行针对性管理，（节省探班费用 燃油费用
        扫把费用等）
      </p>
      <p><span>x</span> 同一公司，不同路段人员的合理调度，做到减人增效</p>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch, nextTick } from "vue";
// 接收值
let props = defineProps({
  carData: {
    type: Object,
    default: false,
  },
});
// 监听当配置项发生变化的时候，调用加载函数
// watch(
//   () => props.carData,
//   (val) => {
//     if (Object.keys(val)) {
//       nextTick(() => {
//         props.carData=val
//       });
//     }
//   },
//   { immediate: true }
// );
</script>
<style lang="less" scoped>
.targetStatisticsEconomic{
  height: 100%;
  height: 100%;
  .boxTops{
    display: flex;
    justify-content: space-between;
    .boxTopsLeft {
    flex: 1;
    margin-right: 30px;
    display: flex;
    justify-content: space-around;
    background: #0a325a;
    align-items: center;
    text-align: center;
    // background: url("../../../../assets/sweepercar/background.png") no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    box-sizing: border-box;
    padding: 10px 0;
    dl {
      border-right: #0e2a4a 1px solid;
      width: 100%;
     
      padding: 30px 0;
      box-sizing: border-box;
      dt {
        color: #4e7594;
      }
      dd {
        font-size: 30px;
        font-weight: bold;
        color: #2393ff;
      }
    }
  }
  .boxTopsRight {
    width: 30%; 
    text-align: center; background: #0a325a;
    dl{
      height: 100%;
      display: flex;
    justify-content: center;
    flex-direction: column;
   
      dt {
      color: #4e7594;
    }
    dd {
      font-size: 30px;
      font-weight: bold;
      color: #2393ff;
    }
    }
  }
  }
  .boxCenter {
  flex: 1;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
  width: 100%;
  .boxCenterLeft {
    flex: 0.98;
    display: flex;
    justify-content: space-between;
    .card {
      background: #0a325a;
      width: 100%;
      margin-right: 4px;
      border-radius: 10px;
      text-align: center;
      display: flex;
      flex-direction: column;
      header {
        border-radius: 10px 10px 0 0;
        background: #0f457b;
        color: #4e7594;
        padding: 6px;
      }
      section {
        font-size: 40px;
        font-weight: bold;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      footer {
        display: flex;
        justify-content: space-between;
        dl {
          width: 100%;
          text-align: center;
          dt {
            color: #4e7594;
          }
          dd {
            font-size: 30px;
            font-weight: bold;
            color: #2393ff;
          }
        }
      }
    }
  }
  .boxCenterRight {
    width: 30%;
    text-align: center;
    display: flex;
    justify-content: center;
    justify-content: space-between;
    white-space: nowrap;
    .card {
      background: #0a325a;
      width: 100%;
      border-radius: 10px;
      text-align: center;
      display: flex;
      flex-direction: column;
      header {
        border-radius: 10px 10px 0 0;
        background: #0f457b;
        color: #4e7594;
        padding: 6px;
      }
      section {
        font-size: 40px;
        font-weight: bold;
        height: 3rem;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #2393ff;
      }
      footer {
        display: flex;
        justify-content: space-between;
        dl {
          width: 100%;
          text-align: center;
          dt {
            color: #4e7594;
          }
          dd {
            font-size: 30px;
            font-weight: bold;
            color: #2393ff;
          }
        }
      }
    }
  }
}

.boxBottom {
  h1 {
  background-image: -webkit-linear-gradient(bottom, red, #fd8403, yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 16px;
}
  color: #99bdd0;
}
}
</style>